<template>
    <div class="XDFullScreen">
        <div class="repeatWrapper" v-for="(configItem, index) in privateConfig" :key="index">
            <div class="beforeWrapper">
                <div class="beforelabel"></div>
                <span class="label">{{configItem.label}}</span>
            </div>
            <div class="seperator"></div>

                <el-form ref="ruleForm"
                         label-width="160px"
                         label-position="right"
                         inline
                         class="fullScreenForm"
                >
                    <template v-for="(ruleForm,index) in configItem.ruleForm">


                        <!--   单行输入框-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="!ruleForm.type"
                                :label="ruleForm.label"
                        >
                            <div class="formItemDiv">
                                <span v-if="ruleForm.required">*</span>
                            <XDInput :dataType="ruleForm.dataType"
                                     v-model="configItem.ruleFormData[ruleForm.prop]"
                                    :disabled="ruleForm.disabled||configItem.disabled"
                                     class="fullScreenFormWidth"
                            ></XDInput>
                           
                            </div>
                        </el-form-item>

                        <!--     多行输入框-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="ruleForm.type == 'textArea'"
                                :label="ruleForm.label"
                        >
                            <div class="formItemDiv">
                                <span v-if="ruleForm.required">*</span>
                            <XDInput type="textarea"
                                     v-model="configItem.ruleFormData[ruleForm.prop]"
                                     :disabled="ruleForm.disabled||configItem.disabled"
                                     class="fullScreenFormWidth"
                            ></XDInput>
                            </div>
                        </el-form-item>

                        <!--  单选下拉选择框-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="ruleForm.type=='dropDown'"
                                :label="ruleForm.label"
                        >
                            <div class="formItemDiv">
                                <span v-if="ruleForm.required">*</span>
                            <XDSelecter :list="ruleForm.list"
                                        type="dropDown"
                                        v-model="configItem.ruleFormData[ruleForm.prop]"
                                        :disabled="ruleForm.disabled||configItem.disabled"
                                        class="fullScreenFormWidth"
                            ></XDSelecter>
                            </div>
                        </el-form-item>

                             <!--    网络单选下拉选择框-->
                    <el-form-item
                         class="fullScreenFormItem"
                            :key="index"
                            v-if="ruleForm.addEditType=='netDropDown' && !ruleForm.addEditHidden"
                            :label="ruleForm.label"
                    >
                        <div class="formItemDiv">
                            <span v-if="ruleForm.required">*</span>
                            <XDSelecter :list="ruleForm.list"
                                        type="netDropDown"
                                        v-model="configItem.ruleFormData[ruleForm.prop]"
                                        :link="ruleForm.link"
                                        :disabled="ruleForm.disabled||configItem.disabled"
                                        class="fullScreenFormWidth"
                            ></XDSelecter>
                        </div>
                    </el-form-item>

                        <!-- 时间选择器 Date-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="ruleForm.type=='timePicker'"
                                :label="ruleForm.label"
                        >
                            <div class="formItemDiv">
                                <span v-if="ruleForm.required">*</span>
                                <XDDatePicker type="date"
                                              v-model="configItem.ruleFormData[ruleForm.prop]"
                                              :disabled="ruleForm.disabled||configItem.disabled"
                                              class="fullScreenFormWidth"
                                ></XDDatePicker>
                            </div>
                        </el-form-item>

                        <!-- 时间选择器 datetime-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="ruleForm.type=='timePickerDateTime'"
                                :label="ruleForm.label"
                        >
                            <div class="formItemDiv">
                                <span v-if="ruleForm.required">*</span>
                                <XDDatePicker type="datetime"
                                              v-model="configItem.ruleFormData[ruleForm.prop]"
                                              :disabled="ruleForm.disabled||configItem.disabled"
                                              class="fullScreenFormWidth"
                                ></XDDatePicker>
                            </div>
                        </el-form-item>

                        <!--  下载-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="ruleForm.type=='download'"
                                :label="ruleForm.label"
                        >
                            <div class="fullScreenFormWidth" style="display: flex">
                            <XDDownloader v-model="configItem.ruleFormData[ruleForm.prop]"

                            ></XDDownloader>
                            </div>
                        </el-form-item>

                        <!--   上传-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="ruleForm.type=='upload'"
                                :label="ruleForm.label"
                        >
                            <div class="formItemDiv fullScreenFormWidth" style="display: flex">
                                <span v-if="ruleForm.required">*</span>
                                <XDUpload v-model="configItem.ruleFormData[ruleForm.prop]"
                                          :disabled="ruleForm.disabled||configItem.disabled"
                                          :limit="ruleForm.limit"
                                          :media-only="ruleForm.mediaOnly"
                                ></XDUpload>
                            </div>
                        </el-form-item>


                        <!--  插槽-->
                        <el-form-item
                                class="fullScreenFormItem"
                                :key="index"
                                v-if="ruleForm.type=='slot'"
                                :label="ruleForm.label"

                        >
                            <slot :name="ruleForm.slotName" :data="ruleForm.value"></slot>
                        </el-form-item>




                    </template>
                </el-form>

            <template v-if="configItem.insert">
                <div class="dialog-footer" style="width: 100%; clear: both">
                      <el-button @click="handleClose">取 消</el-button>
                      <el-button type="primary" @click="submit(configItem)">确 定</el-button>
                </div>
            </template>

            <div>

            </div>

            </div>
    </div>
</template>

<script>
    import XDDownloader from "./XDDownloader";
    import XDInput from "./XDInput";
    import XDSelecter from "./XDSelecter";
    import XDDatePicker from "./XDDatePicker";
    import XDUpload from "./XDUpload";
    import {insertTableData} from "./request";
    export default {
        name: 'XDFullScreen',
        props: ['data','config','disabled'],
        data() {
            return {
                models: [{},{},{},{},{},{},{},{},{},{}],
                privateConfig: [
                    {
                        label: '隐患详情',
                        ruleForm: [
                            {
                                label: '隐患级别',
                                type: 'download',
                                prop: '',
                                value: '重大隐患'
                            },
                        ],
                        ruleFormData: {}
                    },
                    {
                        label: '核查情况',
                        ruleForm: [
                            {
                                label: '整改要求',
                                prop: '',
                                value: '水仓漏水'
                            },
                        ],
                        ruleFormData: {}
                    },
                    {
                        label: '检查信息',
                        ruleForm: [
                            {
                                label: '是否关联',
                                prop: '',
                                value: ''
                            },
                        ],
                        ruleFormData: {}
                    },
                ],
                activeName: '',
            };
        },
        created() {
            this.privateConfig = this.config
            this.activeName = this.privateConfig[0].label
            this.process()
        },
        methods: {


            // 处理数据
            process() {

                for (let i=0;i<this.privateConfig.length;i++) {
                    for (let j=0;j<this.privateConfig[i].ruleForm.length;j++) {
                        for (let key in this.data) {
                            if (key == this.privateConfig[i].ruleForm[j].prop) {
                                if (key !='') {
                                    this.privateConfig[i].ruleFormData[key] = this.data[key]
                                }
                            }
                        }
                    }
                }
                console.log(this.models)
            },
            handleClose() {
                this.$emit('close', null)
            },
            submit(item) {

                let data = {}
                let requestJson = item.insert
                data.id = this.data.id
                if(requestJson.mineId) {
                    //this.$store.state.mineId = 85432
                    data.mineId = this.$store.state.mineId
                }
                if(requestJson.companyId) {
                    data.companyId = this.$store.state.companyId
                }
                if(requestJson.params) {
                    Object.assign(data, data, requestJson.params)
                }
                if(item.ruleFormData) {
                    Object.assign(data, data, item.ruleFormData)
                }
                requestJson.data = data

                if(this.requiredCheck(item) == true) {
                    insertTableData(requestJson).then(response=>{
                        let res = response.msg
                        if (res=='success') {
                            this.onSuccess("操作成功！")
                            this.handleClose()
                            this.reload()
                        } else {
                            this.onFailed("操作失败！")
                        }
                    })
                }else{
                    this.onFailed(this.requiredCheck(item))
                }
            },

            requiredCheck(item) {
                for(let i=0;i<item.ruleForm.length;i++) {
                    if(item.ruleForm[i].required) {
                        if (item.ruleFormData[item.ruleForm[i].prop] == null ||
                        item.ruleFormData[item.ruleForm[i].prop] == ''
                        ) {
                            return '操作失败! ' + item.ruleForm[i].label + '是必填项.'
                        }
                    }
                }
                return true   
            },

            //成功msg
            onSuccess(message) {
                this.$message({
                    message: message || '成功',
                    type: 'success'
                });
            },

            //失败msg
            onFailed(message) {
                this.$message({
                    message: message || '失败',
                    type: 'error'
                });
            },
        },
        components: {
            XDInput,
            XDDownloader,
            XDSelecter,
            XDDatePicker,
            XDUpload
        },
        inject: ['reload']
    };
</script>

<style lang="scss" scoped>
    .XDFullScreen {
        height: calc(100vh - 100px);
        overflow-y: auto;
    }

    ::-webkit-scrollbar{
        display: block !important;
        /*滚动条整体样式*/
        width:10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height:1px;
    }

    ::-webkit-scrollbar-thumb{
        /*滚动条中的滚动块*/
        border-radius:10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background:#535353;
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面的轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

    .fullScreenFormWidth {
        width: 177px !important;
    }

    .beforeWrapper {
        width: 100%;
        display: flex;
        z-index: 400;
    }
    .beforelabel {
        width: 5px;
        height: 24px;
        background: #2F6AFF;
        left: 40px;
        top: 50px;
        z-index: 400;
    }
    .label {
        margin-left: 27px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        z-index: 400;
    }
    .seperator {
        height: 1px;
        background: #DDDDDD;
        margin-top: 10px;
    }
    .fullScreenForm {
        margin-top: 45px;
        padding-bottom: 150px;
        padding-left: 150px;
        padding-right: 150px;
    }
    .fullScreenFormItem {
        float: left;
    }
    .repeatWrapper {
        padding-bottom: 50px;
    }

    .formItemDiv {
        display: flex;
    }
    .formItemDiv > span {
        padding-right: 2px;
        margin-left: -8px;
        color: #de2900;
    }
</style>